<template>
	<view class="info-layout" v-if="info">
		<scroll-view scroll-y="true">
			<view class="pic">
				<image src="/static/wode/wode_bg.png" mode="widthFix"> </image>
			</view>

			<view class="item flex-row">
				<view class="describe">课程名称</view>
				<view class="container">{{info.name}}</view>
			</view>

			<view class="item flex-row">
				<view class="describe">分类</view>
				<view class="container">{{info.type}}</view>
			</view>

			<view class="item flex-row">
				<view class="describe">科目</view>
				<view class="container">{{info.subject}}</view>
			</view>

			<view class="item flex-row">
				<view class="describe">作者/出处</view>
				<view class="container">{{info.auth}}</view>
			</view>

			<view class="item flex-row">
				<view class="describe">发布日期</view>
				<uni-dateformat :date="info.pubTime" format="yyyy-MM-dd" class="container"></uni-dateformat>
			</view>

			<view class="item flex-row">
				<view class="describe"> 售价 </view>
				<view class="container" style="color: red;">{{info.price}}元</view>
			</view>

			<view class="item flex-row">
				<view class="describe"> 企业售价 </view>
				<view class="container" style="color: red;">{{info.enPrice}}元</view>
			</view>

			<view class="item flex-row">
				<view class="describe"> 课程介绍 </view>
				<view class="container">
					{{info.content}}
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	defineProps({
		info: {
			type: Object,
			default: null
		}
	})
</script>

<style lang="scss" scoped>
	.info-layout {
		height: 100%;

		scroll-view {
			height: 100%;

			.pic {
				display: flex;
				padding: 20rpx 40rpx 0;

				image {
					width: 100%;
				}
			}

			.item {
				padding: 36rpx 0 0;

				.describe {
					width: 30%;
					text-align: end;
					font-size: 28rpx;
					color: $me-color-gray-6;
				}

				.container {
					flex: 1;
					margin: 0 40rpx;
					font-size: 30rpx;
					color: $me-color-gray-1;
				}
			}
		}
	}
</style>